<template>
    <div class="content">
        <van-nav-bar title="长者数据" />

        <div class="data-card">
            <div class="data-title">
                <van-icon class="title-icon" name="orders-o" />
                <div class="data-title-text">
                    <div><span>无夜间睡眠数据</span></div>
                    <div class="title-sm">下拉刷新,同步下数据吧</div>
                </div>
            </div>
        </div>
        <div class="data-card">
            <div class="data-title">
                <van-icon class="title-icon" name="orders-o" />
                <div class="data-title-text">
                    <div><span>体重</span><span>187.2公斤</span></div>
                    <div class="title-sm">5月16日<span>上午09:10</span></div>
                </div>
            </div>
            <ve-line
                :tooltip-visible="false"
                :legend-visible="false"
                :data="chartData"
                :settings="chartSettings"></ve-line>
        </div>

        <div class="data-card">
            <div class="data-title">
                <van-icon class="title-icon" name="orders-o" />
                <div class="data-title-text">
                    <div><span>身体指数</span><span>37</span></div>
                    <div class="title-sm"><span>5月16日</span><span>上午09:10</span></div>
                </div>
            </div>
            <div class="data-pro-item">
                <div class="data-pro-title">体脂</div>
                <div class="data-pro-data">
                    <van-progress 
                    color="#fdc00d"
                    :percentage="33.2" 
                    :show-pivot="false"
                    stroke-width="8" />
                </div>
                <div class="data-pro-num">33.2%</div>
            </div>
            <div class="data-pro-item">
                <div class="data-pro-title">肌肉</div>
                <div class="data-pro-data">
                    <van-progress 
                    color="#fd9903"
                    :percentage="58" 
                    :show-pivot="false"
                    stroke-width="8" />
                </div>
                <div class="data-pro-num">118.4斤</div>
            </div>
            <div class="data-pro-item">
                <div class="data-pro-title">水分</div>
                <div class="data-pro-data">
                    <van-progress 
                    color="#22ce86"
                    :percentage="47.5" 
                    :show-pivot="false"
                    stroke-width="8" />
                </div>
                <div class="data-pro-num">47.55%</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        this.chartSettings = {};
        return {
            chartData: {
                columns: ["x", "y"],
                rows: [{
                        x: "1/1",
                        y: 178,
                    },
                    {
                        x: "1/2",
                        y: 181,
                    },
                    {
                        x: "1/3",
                        y: 185,
                    },
                    {
                        x: "1/4",
                        y: 183,
                    },
                    {
                        x: "1/5",
                        y: 180,
                    },
                    {
                        x: "1/6",
                        y: 180,
                    },
                ],
            },
        };
    },
};
</script>

<style>
.content{
    padding: 2vh;
    overflow-y: scroll;
}
.data-card{
    border: 1px solid #e2e2e2;
    border-radius: 1px;
    padding: 2vh;
    margin-bottom: 3vw;
    box-shadow: 0px 1px 2px 1px #e2e2e2;
}
.data-title{
    display: flex;
    align-items: center;
}
.title-icon{
    font-size: 7.5vw;
}
.data-title-text{
    padding-left: 2vh;
    text-align: left;
    font-size: 14px;
}
.title-sm{
    margin-top: 1vw;
    font-size: 12px;
    color: #7f7f7f;
}
.data-pro-item {
    display: flex;
    align-items: center;
    padding: 1vh 0;
}
.data-pro-title{
    flex-basis: 15%;
    font-size: 14px;
}
.data-pro-data{
    flex-basis: 70%;
}
.data-pro-num{
    flex-basis: 15%;
    font-size: 14px;
}

</style>
